{% extends get_theme() + "/common/header.html" %}

{% block title %}Flask框架入门指南：从零开始构建Web应用 - PPress主题应用{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{{ url_for('main_static', filename=get_theme() + '/static/css/post_detail.css') }}">
{% endblock %}

{% block content %}
    <div class="post-detail-container">
        <div class="row">
            <!-- 文章内容 -->
            <div class="col-md-8">
                <article class="post-detail">
                    <!-- 文章头部 -->
                    {% if get_article() %}
                        {% set article = get_article() %}


                    <div class="post-header">
                        <h1 class="post-title">{{ article.title }}</h1>
                        <div class="post-meta">
                            <span class="meta-item">
                                <i class="icon-calendar"></i>
                                {{ date_format(article.published_at) }}
                            </span>
                            <span class="meta-item">
                                <i class="icon-folder"></i>
                                {% if get_categories(article.id) %}
                                    {% set category = get_categories(article.id) %}
                                    <a href="/category/{{ category.alias }}">{{ category.title }}</a>
                                {% endif %}
                            </span>
                            <span class="meta-item">
                                <i class="icon-tag"></i>
                                {% for tag in get_tags(article.id) %}
                                    {% if loop.index != get_tags(article.id)|length %}
                                        <a href="/tag/{{ tag.alias }}">{{ tag.title }}、</a>
                                    {% endif %}
                                    {% if loop.index == get_tags(article.id)|length %}
                                        <a href="/tag/{{ tag.alias }}">{{ tag.title }}</a>
                                    {% endif %}

                                {% endfor %}
                            </span>
                            <span class="meta-item">
                                <i class="icon-eye"></i>
                                {{ article.view_count }}
                            </span>
                        </div>
                    </div>

                    <!-- 特色图片 -->
                    <div class="post-image">
                        <img src="{{ article.featured_image }}"
                             alt="Flask框架入门指南" class="img-responsive">
                    </div>

                    <!-- 文章摘要 -->
                    <div class="post-excerpt">
                        <p>{{ article.excerpt }}</p>
                    </div>

                    <!-- 文章内容 -->
                    <div class="post-content">
                        {{ article.content|safe}}
                    </div>

                    <!-- 文章底部 -->
                    <div class="post-footer">
                        <div class="post-tags">
                            <span class="tags-label">标签：</span>
                            {% for tag in get_tags(article.id) %}
                            <a href="#" class="tag-link">{{ tag.title }}</a>
                            {% endfor %}
                        </div>

                        <div class="post-navigation">
                            <div class="nav-links">
                                <a href="#" class="nav-link">
                                    <i class="icon-arrow-left"></i> 返回分类
                                </a>
                                <a href="#" class="nav-link">
                                    <i class="icon-home"></i> 返回首页
                                </a>
                            </div>
                        </div>
                    </div>
                    {% else %}
                    {% endif %}
                </article>

                <!-- 相关文章 -->
                <div class="related-posts">
                    <h3 class="related-title">相关文章</h3>
                    <div class="related-list">
                        <div class="related-item">
                            <h4 class="related-post-title">
                                <a href="#">SQLAlchemy ORM详解：Python数据库操作的最佳实践</a>
                            </h4>
                            <div class="related-post-meta">
                                <span class="meta-item">
                                    <i class="icon-calendar"></i>
                                    2024-01-12
                                </span>
                                <span class="meta-item">
                                    <i class="icon-eye"></i>
                                    856 阅读
                                </span>
                            </div>
                        </div>
                        <div class="related-item">
                            <h4 class="related-post-title">
                                <a href="#">Django vs Flask：选择适合你的Python Web框架</a>
                            </h4>
                            <div class="related-post-meta">
                                <span class="meta-item">
                                    <i class="icon-calendar"></i>
                                    2024-01-08
                                </span>
                                <span class="meta-item">
                                    <i class="icon-eye"></i>
                                    1,567 阅读
                                </span>
                            </div>
                        </div>
                        <div class="related-item">
                            <h4 class="related-post-title">
                                <a href="#">Python Web开发最佳实践：从项目结构到部署</a>
                            </h4>
                            <div class="related-post-meta">
                                <span class="meta-item">
                                    <i class="icon-calendar"></i>
                                    2024-01-05
                                </span>
                                <span class="meta-item">
                                    <i class="icon-eye"></i>
                                    2,341 阅读
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 侧边栏 -->
            <div class="col-md-4">
                <div class="sidebar">
                    <!-- 文章信息 -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">文章信息</h3>
                        <div class="post-info">
                            {% if get_article() %}
                                {% set article = get_article() %}
                            <div class="info-item">
                                <span class="info-label">发布时间：</span>
                                <span class="info-value">{{ date_format(article.published_at) }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">阅读量：</span>
                                <span class="info-value">{{ article.view_count}}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">分类：</span>
                                <span class="info-value">
                                    {% if get_categories(article.id) %}
                                        {% set category = get_categories(article.id) %}
                                        <a href="/category/{{ category.alias }}">{{ category.title }}</a>
                                    {% else %}
                                        <a href="#">未分类</a>
                                    {% endif %}
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">作者：</span>
                                <span class="info-value">{{ article.author_id }}</span>
                            </div>
                            {% else %}
                            {% endif %}
                        </div>
                    </div>

                    <!-- 分类目录 -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">分类目录</h3>
                        <ul class="category-list">
                            {% for category in get_categories() %}
                               <li>
                                    <a href="/category/{{ category.alias }}">
                                        {{ category.title }}
                                        <span class="count">({{ category.count }})</span>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                    <!-- 标签云 -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">标签云</h3>
                        <div class="tag-cloud">
                            {% for tag in get_tags() %}
                                <a href="/tag/{{ tag.alias }}" class="tag-item">{{ tag.title }}</a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}